<template>
	<view class="contain">
		<view class="containBottom">
			<view class="containBottomTop">
				<view class="containBottomText">
					头像
				</view>
				<view class="containBottomTopImg" @click="gochangeAvatar">
					<view class="containBottomTopImgs">
						<image :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="containBottoms">
				<view class="containBottomText">
					名字
				</view>
				<view class="containBottomsRight" @click="goChangeName">
					<view class="containBottomsRightText">
						{{userInfo.nickname}}
					</view>
					<view class="">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>

			<view class="containBottomSecond">
				<view class="containBottomSecondText">
					绑定手机号
				</view>
				<view class="containBottomSecondRight" @click="goChangePhone">
					<view class="containBottomSecondRightText">
						{{userInfo.phone}}
					</view>
					<view class="">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getUserInfo
	} from '@/api/my.js'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const userInfo = reactive({
		nickname: '', //用户名
		avatar: '', //用户头像
		phone: '' //手机号
	})
	//获取用户信息
	onMounted(() => {
		// 在这里执行获取数据或初始化操作
		getUserInfo().then(res => {
			console.log('获取用户信息', res)
			userInfo.avatar = res.data.avatar
			userInfo.nickname = res.data.nickname
			if (res.data.phone) {
				userInfo.phone = res.data.phone.replace(/(d{3})d{4}(d{4})/, '$1XXXX$2')
			}
		})
	});
	onShow(() => {
		// 在这里执行获取数据或初始化操作
		getUserInfo().then(res => {
			userInfo.avatar = res.data.avatar
			userInfo.nickname = res.data.nickname
			if (res.data.phone) {
				userInfo.phone = res.data.phone.replace(/(d{3})d{4}(d{4})/, '$1XXXX$2')
			}
		})
	})
	//跳转到更改名字页面
	const goChangeName = () => {
		uni.navigateTo({
			url: '/pages/my/changeName'
		})
	}
	//跳转到更改头像页面
	const gochangeAvatar = () => {
		uni.navigateTo({
			url: '/pages/my/changeAvatar'
		})
	}
	//跳转到绑定手机号页面
	const goChangePhone = () => {
		uni.navigateTo({
			url: '/pages/bindingPhone/bindingPhone'
		})
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		background-color: #d8d8d8;

		.containTop {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			border-bottom: 1rpx solid gray;

			.containTopCenter {
				margin-right: 90rpx;
			}
		}

		.containBottom {
			width: 100%;
			height: 350rpx;
			background-color: #fff;
			padding: 0 20rpx;

			.containBottomTop {
				width: 100%;
				height: 130rpx;
				padding: 10rpx 10rpx;
				border-bottom: 1rpx solid gray;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.containBottomText {
					font-weight: 600;
				}

				.containBottomTopImg {
					width: 160rpx;
					height: 100%;
					display: flex;
					align-items: center;

					.containBottomTopImgs {
						width: 130rpx;
						height: 100%;
						border-radius: 20rpx;

						image {
							width: 90%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}

			}

			.containBottoms {
				width: 100%;
				height: 100rpx;
				padding: 10rpx 10rpx;
				border-bottom: 1rpx solid gray;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.containBottomText {
					font-weight: 600;
				}

				.containBottomsRight {
					width: 300rpx;
					height: 100%;
					display: flex;
					align-items: center;

					.containBottomsRightText {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}
			}

			.containBottomSecond {
				width: 100%;
				height: 100rpx;
				padding: 10rpx 10rpx;
				border-bottom: 1rpx solid gray;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.containBottomSecondText {
					font-weight: 600;
				}

				.containBottomSecondRight {
					display: flex;
				}
			}
		}
	}
</style>